<template>
  <a-range-picker
    v-model="nowVal"
    :popup-container="isFullscreen ? mainBox : 'body'"
    v-bind="$props"
    @change="changeHandle"
  />
</template>

<script setup lang="ts">
  import { ref, watch, PropType } from 'vue';
  import { isFullscreen } from '@/common/hooks/full-screen';

  const props = defineProps({
    value: {
      type: Array as PropType<any>,
      default: () => [],
    },
  });
  const emit = defineEmits(['update:value']);

  const nowVal = ref(undefined);
  const mainBox = ref();
  mainBox.value = document.querySelector('main');
  watch(
    () => props.value,
    (newVal) => {
      if (!newVal) {
        nowVal.value = undefined;
      } else {
        nowVal.value = newVal;
      }
    }
  );
  const changeHandle = () => {
    emit('update:value', nowVal.value);
  };
</script>
